<template>
  <div class="main-main readonly">
    <el-container style="height: 100%;" v-loading="loading">
      <el-main>
        <el-form ref="form" :model="form" label-width="120px" :rules="rules">
          <el-row>
            <el-col :span="12">
              <el-form-item prop="sp_dw" label="审批单位">
                <el-input
                  size="medium"
                  v-model.trim="form.sp_dw"
                  :disabled="$route.query.is_sealed == 2"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="d-end" style="margin-bottom:20px;">
              <el-button
                size="medium"
                type="primary"
                @click="save"
                v-if="$route.query.is_sealed == 1"
              >保存</el-button>
              <el-button size="medium" type="info" v-if="$route.query.is_sealed == 2">已封存</el-button>
            </el-col>
          </el-row>
          <el-row type="flex" justify="start">
            <el-col :span="12">
              <el-form-item prop="sp_rq" label="审批日期">
                <el-date-picker
                  value-format="yyyy-MM-dd"
                  size="medium"
                  v-model="form.sp_rq"
                  type="date"
                  placeholder="选择日期"
                  :disabled="$route.query.is_sealed == 2"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
           <el-row class="d-flex">
            <el-col :span="24">
              <el-form-item
                prop="bz"
                label="备注"
              >
                <el-input
                  size="medium"
                  v-model.trim="form.bz"
                  placeholder="未完成原因/特殊情况说明"
                  :disabled="$route.query.is_sealed == 2"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="start" >
            <el-col :span="24" class="">
              <el-form-item prop label="上传附件">
                <uploader
                  :fileslists="fileslist"
                  :options="options"
                  :file-status-text="statusText"
                  :fileurl="this.$updata"
                  class="uploader-example"
                  ref="uploader"
                  @file-success="fileSuccess"
                  @file-remove="remove"
                  :app="$route.query.is_sealed == 1"
                ></uploader>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- <el-row class="d-start">
          <el-col :span="21" class="d-start">
            <span
              class="d-center"
              style="margin:0  10px 0 30px;font-size: 14px;color: #606266;width:100px;"
            >上传附件</span>
            <uploader
              :fileslists="fileslist"
              :options="options"
              :file-status-text="statusText"
              :fileurl="this.$updata"
              class="uploader-example"
              ref="uploader"
              @file-success="fileSuccess"
              @file-remove="remove"
            ></uploader>

          </el-col>
        </el-row>-->
      </el-main>
    </el-container>
  </div>
</template>

<script>
import mixinsFile from "@/mixins/uploadFile.js";

export default {
  mixins: [mixinsFile],
  data() {
    return {
      form: {},
      loading: false,
      rules: {
        // sp_dw: [{ required: true, message: "该值不能为空", trigger: "blur" }],
        // sp_rq: [{ required: true, message: "该值不能为空", trigger: "blur" }]
      },
      fileslist: [],
      options: {
        target: this.$updata + "/api/index/uploads", // '//jsonplaceholder.typicode.com/posts/',
        testChunks: false
      },
      statusText: {
        success: "成功了",
        error: "出错了",
        uploading: "上传中",
        paused: "暂停中",
        waiting: "等待中"
      }
      //上传
    };
  },
  methods: {
    search() {
      this.loading = true;
      this.$get("/api/QqSgxk/index", { xm_id: this.xm_id }).then(res => {
        if (res.code == 200 && res.data) {
          if (res.data.sp_rq == "0000-00-00") res.data.sp_rq = "";

          this.form = res.data;
          this.fileslist = res.data.files ? res.data.filesarr : [];
        } else {
          this.form = {};
          this.fileslist = [];
        }
        this.loading = false;
      });
    },
    save() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true;

          //上传参数组合
          let fileUrl = this.fileslist.map(v => {
            return v.path;
          });
          this.form.files = fileUrl.join(",");
          //上传参数组合
          delete this.form.filesarr;

          this.form.xm_id = this.xm_id;
          this.$post("/api/QqSgxk/actions", this.form).then(res => {
            if (res.code == 200) {
              this.$message({
                message: res.msg,
                type: "success"
              });
            } else {
              this.$message({
                message: res.msg,
                type: "error"
              });
            }
            this.loading = false;
          });
        } else {
          return false;
        }
      });
    },
    //上传组件移除返回
    remove(index) {
      this.fileslist.splice(index, 1);
    },
    //上传成功返回
    fileSuccess(rootFile, file, message, chunk) {
      if (JSON.parse(message).state == "success") {
        this.fileslist.push({
          path: JSON.parse(message).code,
          name: chunk.file.name
        });
        console.log(this.fileslist);
      } else {
        this.$message({
          message: chunk.file.name + JSON.parse(message).code,
          type: "error"
        });
      }
    }
  },
  mounted() {
    this.search();
  },
  computed: {
    xm_id() {
      return this.$route.query.xm_id || this.$route.params.xm_id;
    },
    xmmc() {
      return this.$route.query.xmmc;
    }
  },
  watch: {
    xm_id() {
      this.search();
    }
  }
};
</script>

<style scoped lang="less">
.main-main {
  width: 100%;
  height: calc(100% - 54px);
  .click {
    width: 100px;
    height: 100px;
    background: #ccc;
    cursor: pointer;
    position: absolute;
    right: 0;
    &:hover {
      border: 1px dashed #4098ff;
    }
  }
  .line {
    width: 2px;
    height: calc(100% - 40px);
    position: absolute;
    background: #ccc;
    bottom: 0;
    left: 20px;
  }
}
.red {
  position: relative;
  &::before {
    top: 6px;
    left: 40px;
    color: red;
    content: "*";
    position: absolute;
    margin-left: 4px;
    // font-weight: 700;
    line-height: 1.8em;
  }
}
</style>